<template>
	<view class="mask" v-if="showCalendar" @click.stop="cancel">
		<view class="calendar">
			<view class="content" @tap.stop>
				<view class="title">
					<view class="switch">
						<view class="left" :class="{ active: type === 'solar' }" @click="switchBtn('solar')">公历</view>
						<view class="right" :class="{ active: type === 'lunar' }" @click="switchBtn('lunar')">农历</view>
						<view class="bg" :class="type"></view>
					</view>
					<!-- <view class="ignore-year">忽略年份</view> -->
				</view>
				<picker-view :indicator-style="indicatorStyle" :value="selectValue" @change="bindChange">
					<picker-view-column>
						<view class="item" v-for="(item, index) in years" :key="index">{{ item }}年</view>
					</picker-view-column>
					<picker-view-column>
						<view class="item" v-for="(item, index) in months" :key="index">{{ item }}</view>
					</picker-view-column>
					<picker-view-column>
						<view class="item" v-for="(item, index) in days" :key="index">{{ item }}</view>
					</picker-view-column>
					<picker-view-column v-if="isHourShow">
						<view class="item" v-for="(item, index) in lunarHour" :key="index">{{ isActive ? item.solar : item.label }}</view>
					</picker-view-column>
					<picker-view-column v-if="isHourShow">
						<view class="item" v-for="(item, index) in allMinutes" :key="index">{{ isActive ? item.solar : item.label }}</view>
					</picker-view-column>
				</picker-view>
				<!-- <view class="bottom" v-if="isSwitch">
									<view class="left" @click="cancel">取消</view>
									<view class="right" @click="sure">确定</view>
								</view> -->
				<view class="bottomBtn" @click="sure">
					<view class="bottomBtn-btn">确定</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import conversion from './calendar.js';
import lunarHour from './information.js';
import allMinutes from './minute.js';
export default {
	name: 'e-run-calendar',
	data() {
		return {
			oldYear: 1950, // 最大年份
			type: 'solar', // lunar农历，solar公历
			isActive: true, // true公历
			showData: '', // 显示数据
			checked: true,
			years: [],
			months: [],
			days: [],
			indicatorStyle: `height: ${Math.round(uni.getSystemInfoSync().screenWidth / (750 / 100))}px;`,
			lunarHour: [],
			allMinutes: [],
			minutes: '',
			date: '',
			hour: '',
			leap_month: 0, // 1为闰月0为非闰月
			sureYear: '1998', // 默认弹出显示年份
			sureMonth: '1', // 默认弹出显示月份
			selectValue: [30, 0, 0, 0], // 默认弹出选择的状态1998-10-16 0
			showYear: '',
			showMonth: '',
			nextFinally: true
		};
	},
	props: {
		showCalendar: {
			type: Boolean,
			default: () => false
		},
		isHourShow: {
			type: Boolean,
			default: false
		},
		isSwitch: {
			type: Boolean,
			default: true
		},
		selectOptions: {
			type: Array,
			default: () => [30, 0, 0, 0, 0]
		}
	},
	watch: {
		showCalendar(newVal, oldVal) {
			if (newVal) this.getTime();
		},
		selectOptions(newVal, oldVal) {
			this.selectValue = newVal;
		}
	},
	created() {
		this.getTime();
		uni.$on('selectOptionsArr', (data) => {
			this.selectValue = data;
		});
	},
	onHide() {
		//关闭监听
		uni.$off('selectOptionsArr');
	},
	mounted() {},
	methods: {
		cancel() {
			this.$emit('cancel');
		},
		// 提交
		sure() {
			if (!this.nextFinally) {
				console.log('别着急，正在选时间');
				return false;
			}
			let data = {
				text: this.showData, // 显示数据
				type: this.type,
				brithday: {
					'brithday[date]': this.date,
					'brithday[hour]': this.hour,
					'brithday[type]': this.type
					// "brithday[leap_month]":this.leap_month,
				},
				newBirthday: {
					brithday: {
						date: this.date,
						hour: this.hour,
						type: this.type
					}
				},
				date: this.date,
				year: this.showYear,
				hour: this.coverTo(this.hour) || 0,
				month: this.coverTo(Number(this.showMonth)),
				minutes: this.coverTo(this.minutes) || '00',
				day: this.coverTo(this.selectValue[2] + 1)
			};
			if (this.type == 'lunar') {
				data.brithday['brithday[leap_month]'] = this.leap_month;
				data.newBirthday.brithday.leap_month = this.leap_month;
				data.leap_month = this.leap_month;
			}
			this.$emit('confirm', data);
			this.nextFinally = true;
		},
		// 进来获取公历的1990-02-10 10,初始化
		getTime() {
			const date = new Date();
			const year = date.getFullYear();
			const month = date.getMonth() + 1;
			const day = date.getDate();
			this.years = [];
			this.days = [];
			this.months = [];
			for (let i = this.oldYear; i <= date.getFullYear(); i++) {
				if (this.isActive) {
					this.years.push(i);
				} else {
					this.years.push(i);
					// this.years.push(conversion.toChinaYear(i));
				}
			}

			if (this.isActive) {
				this.getsolarMonthDays(this.sureYear, this.sureMonth, this.selectValue);
			} else {
				this.getlunarMonthDays(this.sureYear, this.sureMonth, this.selectValue);
			}
			this.lunarHour = lunarHour.lunarHour;
			this.allMinutes = allMinutes;
		},
		bindChange: function (e) {
			const val = e.detail.value;
			let year = val[0] + this.oldYear,
				month = val[1] + 1,
				day = val[2] + 1;
			let minute = val[4];
			this.days = [];
			this.months = [];
			this.selectValue = e.detail.value;
			this.nextFinally = false;
			this.minutes = this.allMinutes[minute].value;
			// 公历返回每个月天数
			if (this.isActive) {
				this.getsolarMonthDays(year, month, val);
			} else {
				this.getlunarMonthDays(year, month, val);
			}
		},
		// D=>DD,M=>MM,日，月转换 1=>01
		coverTo(num) {
			return num < 10 ? '0' + num : num;
		},
		// 获取公历的月份和天数
		getsolarMonthDays(year, month, val) {
			for (let i = 1; i <= 12; i++) {
				this.months.push(i + '月');
			}
			for (let i = 1; i <= conversion.solarDays(year, month); i++) {
				this.days.push(i + '日');
			}
			this.leap_month = 0;
			this.date = `${val[0] + this.oldYear}-${this.coverTo(val[1] + 1)}-${this.coverTo(val[2] + 1)}`;
			this.hour = val[3];
			let showHour = this.isHourShow ? `${val[3] != 0 ? val[3] + '时' : ''}` : '';
			this.showData = `公历 ${val[0] + this.oldYear}年${this.coverTo(val[1] + 1)}月${this.coverTo(val[2] + 1)}日 ${showHour}`;
			this.showYear = `${val[0] + this.oldYear}`;
			this.showMonth = `${val[1] + 1}`;
			setTimeout((e) => {
				this.nextFinally = true;
			}, 200);
		},
		// 获取农历的月份和天数
		getlunarMonthDays(year, month, e) {
			let leap_month = conversion.leapMonth(year);
			// 返回农历 闰月没有就返回0
			for (let i = 1; i <= 12; i++) {
				this.months.push(conversion.toChinaMonth(i));
				if (i == leap_month) {
					this.months.push('闰' + conversion.toChinaMonth(i));
				}
			}
			// 农历返回天数
			// **leapMonth 返回闰月 conversion.leapMonth(year)
			// **monthDays 返回非闰月的天数
			// **leapDays 返回闰月的天数
			if (conversion.leapMonth(year) != 0 && (conversion.leapMonth(year) == month || month - 1 == conversion.leapMonth(year))) {
				for (let i = 1; i <= conversion.leapDays(year, conversion.leapMonth(year)); i++) {
					this.days.push(conversion.toChinaDay(i));
				}
			} else {
				let lunarMonth = '';
				if (conversion.leapMonth(year)) {
					lunarMonth = month < conversion.leapMonth(year) ? month : month - 1;
				} else {
					lunarMonth = month;
				}
				for (let i = 1; i <= conversion.monthDays(year, lunarMonth); i++) {
					this.days.push(conversion.toChinaDay(i));
				}
			}
			if (e) {
				const val = e;
				let year = val[0] + this.oldYear,
					month = val[1],
					day = val[2],
					hour = val[3] ? val[3] : 0,
					m = '',
					d = '',
					h = '';
				m = this.months[month];
				d = this.days[day];
				h = this.lunarHour[hour].value + '时';
				this.leap_month = month == leap_month && leap_month != 0 ? 1 : 0;
				let lunarToMonth = this.coverTo(leap_month != 0 ? (month + 1 <= leap_month ? month + 1 : month) : month + 1);
				console.log(lunarToMonth, '获取当前月份');
				this.date = `${year}-${lunarToMonth}-${this.coverTo(day + 1)}`;
				this.hour = hour - 1;
				let showHour = this.isHourShow ? `${h}` : '';
				this.showData = `农历 ${conversion.toChinaYear(year)}年${m}${d} ${showHour == '24时' ? '' : showHour}`;
				this.showYear = year;
				this.showMonth = lunarToMonth;
			}
			setTimeout((e) => {
				this.nextFinally = true;
			}, 150);
		},
		// 切换公历<=>农历 回显以及切换 this.$refs.yourname.switchBtb(type,data),type:"lunar" or "solar", data:{date:"1992-02-10",hour:3,leap_month:"0",type:"lunar"}
		switchBtn(type, data) {
			if (this.type == type) {
				return false;
			}
			this.selectValue = [30, 0, 0, 0, 0]; // 默认弹出选择的状态1990-06-10 10
			this.isActive = type == 'solar' ? true : false;
			this.type = type;
			this.getTime();
			return;
			// 农历公历互相联动切换
			if (this.type == type) {
				return false;
			}
			if (type == 'lunar') {
				// 公历切换为农历
				let solarYear = this.selectValue[0] + this.oldYear; // 公历年份
				let leapMonth = conversion.leapMonth(solarYear);
				let solarMonth = this.selectValue[1] + 1, // 公历年月份
					solarDay = this.selectValue[2] + 1, // 公历年日份
					hour = this.selectValue[3];
				let lunarDate = conversion.solar2lunar(solarYear, solarMonth, solarDay);
				this.sureYear = lunarDate.lYear; // 默认弹出显示年份
				this.sureMonth = lunarDate.lMonth; // 默认弹出显示月份
				this.leap_month = leapMonth != 0 ? 1 : 0;
				let y = lunarDate.lYear - this.oldYear,
					m = this.leap_month == 0 ? lunarDate.lMonth - 1 : this.selectValue[1] < leapMonth ? lunarDate.lMonth - 1 : lunarDate.lMonth,
					d = lunarDate.lDay - 1;
				this.selectValue = [y, m, d, hour]; // 默认弹出选择的状态1990-06-10 10
			} else {
				// 农历切换为公历
				let lunarYear = this.selectValue[0] + this.oldYear; // 农历年份
				let leapMonth = conversion.leapMonth(lunarYear); // 一年中的几月份是闰月
				let lunarMonth = leapMonth == 0 ? this.selectValue[1] + 1 : this.selectValue[1] + 1 <= leapMonth ? this.selectValue[1] + 1 : this.selectValue[1], // 农历年月份
					lunarDay = this.selectValue[2] + 1, // 农历年日份
					hour = this.selectValue[3];
				console.log(lunarYear, lunarMonth, lunarDay, '11111111');
				let lunarDate = conversion.lunar2solar(lunarYear, lunarMonth, lunarDay, leapMonth == this.selectValue[1] ? true : false);
				console.log(lunarDate, 'lunarDatelunarDate');
				this.sureYear = lunarDate.cYear; // 默认弹出显示年份
				this.sureMonth = lunarDate.cMonth; // 默认弹出显示月份
				this.leap_month = leapMonth != 0 ? 1 : 0;
				let y = lunarDate.cYear - this.oldYear,
					m = lunarDate.cMonth - 1,
					d = lunarDate.cDay - 1;
				this.selectValue = [y, m, d, hour]; // 默认弹出选择的状态1990-06-10 10
				console.log(this.sureYear, this.sureMonth, this.selectValue, '00000');
			}
			this.isActive = type == 'solar' ? true : false;
			this.type = type;
			this.getTime();
		}
	}
};
</script>

<style lang="scss" scoped>
.mask {
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	width: 750rpx;
	box-sizing: border-box;
	background: rgba(0, 0, 0, 0.3);
	z-index: 9999999;
}
.u-mask-zoom {
	transform: scale(1, 1);
}
.calendar {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	height: 100%;
	.content {
		padding-bottom: 40rpx;
		position: relative;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 100%;
		// height: 100%;
		background-color: #fff;
		border-top-left-radius: 24rpx;
		border-top-right-radius: 24rpx;
		animation: switchOpen 500ms linear;
		@keyframes switchOpen {
			from {
				top: 100%;
			}
			to {
				top: 0%;
			}
		}
		.title {
			display: flex;
			flex-direction: row;
			align-items: center;
			width: 100%;
			height: 100rpx;
			position: relative;
			border-bottom: 2rpx solid #e6e6e6;
			background-color: #ffffff;
			border-top-left-radius: 24rpx;
			border-top-right-radius: 24rpx;
			/* #ifdef MP-WEIXIN */
			margin-top: 0;
			/* #endif */
			.switch {
				display: flex;
				align-items: center;
				margin: 66rpx auto 0;
				width: 622rpx;
				height: 80rpx;
				background: #f0f0f0;
				border-radius: 24rpx;

				.left,
				.right {
					width: 50%;
					display: block;
					background: #f0f0f0;
					text-align: center;
				}
				.active {
					transition: 0.3s;
					background-color: #fff;
					border: 1px solid $uni-theme-color;
					height: 100%;
					display: flex;
					justify-content: center;
					align-items: center;
					border-radius: 20rpx;
				}
			}
		}
		picker-view {
			width: 100%;
			height: 500rpx;
			margin: 40rpx auto;
			/deep/.item {
				display: flex;
				align-items: center;
				justify-content: center;
				color: #333333;
				font-size: 32rpx;
				font-weight: bold;
			}
			.uni-picker-view-wrapper {
				uni-picker-view-column {
					display: flex;
					align-items: center;
					justify-content: center;
					color: #333333;
					font-size: 32rpx;
					font-weight: bold;
					.uni-picker-view-group {
						.uni-picker-view-content {
							text-align: center;
							line-height: 110rpx;
							.item {
								display: flex;
								align-items: center;
								justify-content: center;
								color: #333333;
								font-size: 32rpx;
								font-weight: bold;
							}
						}
					}
				}
			}
			/deep/.uni-picker-view-indicator {
				// text-align: center;
				// line-height: 110rpx;
			}
		}
		.bottom {
			height: 100rpx;
			width: 100%;
			display: flex;
			background-color: #f7f7f7;
			view {
				width: 50%;
				line-height: 110rpx;
				text-align: center;
				font-size: 32rpx;
			}
			.left {
				color: #a6a6a6;
				border-right: 1px solid transparent;
			}
			.right {
				color: #1860ff;
				border-left: 1px solid #e6e6e6;
			}
		}
		.bottomBtn {
			width: 622rpx;
			height: 100rpx;
			background: $uni-theme-color;
			display: flex;
			align-items: center;
			justify-content: center;
			.bottomBtn-btn {
				font-family: SourceHanSerifCN, SourceHanSerifCN;
				font-size: 32rpx;
				color: #fff;
			}
		}
	}
}
</style>
